<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs, onUnmounted} from 'vue';
import router from "/@/router";
import AboutView from "/@/views/AboutView.vue";
import AppView from "/@/views/AppView.vue";

export default defineComponent({
  name: 'WelcomePage',
  components: {AboutView, AppView},
  setup() {
    const isSmall = ref(false);
    const currentMenu = ref('home');
    const state = reactive({
      logoIcon: import.meta.env.VITE_LOGO,
    });
    const isSmallScreen = () => {
      const mediaQuery = window.matchMedia('(max-width: 768px)');
      isSmall.value = mediaQuery.matches;
    };
    onMounted(() => {
      window.addEventListener('resize', isSmallScreen);
    })
    onUnmounted(() => {
      window.removeEventListener('resize', isSmallScreen);
    })
    const handleMenuGo = (_path: string) => {
      router.push(_path)
    }

    const switchMenu = (_name: string) => {
      currentMenu.value = _name
    }
    return {
      currentMenu,
      isSmall,
      handleMenuGo,
      switchMenu,
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="home-wrap">
    <div class="inner-wrap" :style="{width: isSmall ? '100vw' : '60vw'}">
      <div class="header">
        <div class="logo">
          <el-image :src="logoIcon"/>
          <span class="font-bold">网页版</span>
        </div>
        <div class="menu">
          <div class="menu-item" :class="currentMenu == 'home' ? 'menu-item-active' : '' "
               @click="switchMenu('home')">
            首页
          </div>
          <div class="menu-item" :class="currentMenu == 'about' ? 'menu-item-active' : '' "
               @click="switchMenu('about')">
            关于JIM
          </div>
          <div class="menu-item" @click="handleMenuGo('/policy')">
            协议政策
          </div>
          <div class="menu-item" @click="handleMenuGo('/login')">
            登录
          </div>
        </div>
      </div>
      <div class="content">
        <AppView v-if="currentMenu == 'home'"/>
        <AboutView v-if="currentMenu == 'about'"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-wrap {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;

  .inner-wrap {
    width: 60vw;
    background-color: rgba(255, 255, 255, 0.8);
    height: 100vh;
    padding: 40px 60px;
    overflow-x: hidden;
    overflow-y: auto;

    .header {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid #a2a2a2;

      .logo {
        display: flex;
        align-items: center;

        .el-image {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }

        .font-bold {
          font-weight: bold;
        }
      }

      .menu {
        display: flex;
        align-items: center;
        flex-direction: row;

        &-item {
          padding: 6px 20px;
          cursor: pointer;

          &-active {
            font-weight: bold;
          }
        }
      }
    }

    .content {
      padding: 40px 0;
    }
  }
}
</style>
